<template>
    <div class="tool-bar">
        <div  class="tool-bar-item" v-for="(item,index) in toolBarData" @click="onChangeFragment(item,index)">
            <img class="tool-bar-item-img" :src="[index === selectItemIndex ? item.hIcon:item.nIcon]" alt="">
            <p class="tool-bar-item-name" :class="{'tool-bar-item-name-h': index===selectItemIndex  }">{{item.name}}</p>
        </div>
    </div>
</template>

<script>
    /*
    * toolbar的功能
    * 永远位于页面最底部
    * 点击toolbbar按钮 页面发生对应的变化
    * 按钮分为默认和选中的2个状态
    *
    * 能力和约束
    * 通过一个回调，告诉父组件，按钮的点击事件
    * 当按钮被选中的时候，应该切换按钮的状态
    * */
    export default {
        name: "ToolBar",
        data() {
            return {
                //数据源 由数据去驱动视图
                toolBarData:[
                    {
                        //默认状态下的图片
                        nIcon:require('@img/home-n.svg'),
                        hIcon:require('@img/home-h.svg'),
                        name:'首页',
                        componentName:'home'
                    },
                    {
                        nIcon:require('@img/shopping-n.svg'),
                        hIcon:require('@img/shopping-h.svg'),
                        name:'购物车',
                        componentName:'shopping'
                    },
                    {
                        nIcon:require('@img/my-n.svg'),
                        hIcon:require('@img/my-h.svg'),
                        name:'杰哥',
                        componentName:'my'
                    }
                ],
                selectItemIndex: 0

            }
        },
        methods:{
            onChangeFragment(item,index )
            {
                this.selectItemIndex=index
                this.$emit('onChangeFragment',item.componentName)
            }
        }
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    @import "@css/style.scss";
    .tool-bar{
        width: 100%;
        height: px2rem(46);
        display: flex;
        justify-content: space-around;
        background-color:white;
        box-shadow: 0 0  16px  0 rgba(0,0,0,0.2);
        border-top: 10px solid $lineColor;
        &-item{
            text-align: center;
            padding: px2rem(4) px2rem(12);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            &-img{
                width: px2rem(22);
                height: px2rem(22);
            }
            &-name{
                font-size: $infoSize;
                margin-top: px2rem(4);
                &-h{
                    color: $mainColor;
                }
            }

        }
    }

</style>